<template>
	<view class="item">
		<view class="title">
			<view class="left">
				<icon class="ic-shiyanshi iconfont bs-shiyanshi" type=""></icon>
				<text>{{ item.name }}</text>
			</view>
			<view class="right dui" v-if='item.status == "1"'>
				<text>可预约</text>
				<icon class="ic-dui iconfont bs-dui"></icon>
			</view>
			<view class="right cuo" v-if='item.status == "2"'>
				<text>维护中</text>
				<icon class="ic-cuo iconfont bs-cuo"></icon>
			</view>
			<view class="right zanting" v-if='item.status == "3"'>
				<text>未开放</text>
				<icon class="ic-cuo iconfont bs-cuo"></icon>
			</view>
			<view class="right guzhang" v-if='item.status == "4"'>
				<text>维护中</text>
				<icon class="ic-guzhang iconfont bs-guzhang"></icon>
			</view>
			<view class="right jianshe" v-if='item.status == "5"'>
				<text>建设中</text>
				<icon class="ic-jianshe iconfont bs-jianshe"></icon>
			</view>
		</view>
		<view class="bottom">
			<view class="address">
				<icon class="ic-weizhi iconfont bs-weizhi"></icon>
				<text>位置:&nbsp;&nbsp;{{ item.ssxy + "-" + item.address }}</text>
			</view>
			<view class="address">
				<icon class="ic-weizhi iconfont bs-shebei"></icon>
				<text>设备数量:&nbsp;&nbsp;{{ item.sbsl }}台</text>
			</view>
		</view>
		<view class="sbitem" v-if="sbData.length > 0 && !isDetail">
			<compSysListItem v-for="(item, index) in sbData" :key="index" :item="item" @click="onclick(item)"
				:confirmDate="confirmDate">
			</compSysListItem>
		</view>
	</view>
</template>

<script lang="ts" setup>
import {
	ref,
	reactive
} from 'vue'
import { onShow, onLoad } from '@dcloudio/uni-app'
import compSysListItem from '@/pages/sys/comps/comp-sys-list-item.vue'
import db from '@/api/database'

const props = defineProps({
	item: {
		type: Object,
		default: {},
	},
	isDetail: {
		type: Boolean,
		default: false,
	},
})

const sbData = ref([])
const confirmDate = ref({ year: new Date().getFullYear(), month: new Date().getMonth() + 1, day: new Date().getDate() })

async function fetchData(sysId) {
	try {
		const res = await db.collection('sblb').where({
			sysID: sysId,
			status: { $in: ['5', '可预约'] }
		}).get()
		sbData.value = res.data
	} catch (error) {
		console.error('查询数据失败:', error)
	}
}


function onclick(item) {
	uni.navigateTo({
		url: '/pages/reservationDetail/reservationDetail?id=' + item._id
	})
}

onShow(() => {
	if (props.item._id) fetchData(props.item._id)
})
</script>

<style lang="scss" scoped>
@import "/static/css/iconfont.css";

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.item {
	padding: 15px 10px 8px;
	border-radius: 12px;
	background-color: rgba(255, 255, 255, 0.95);
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
	animation: fadeIn 0.5s ease-out;
	overflow: hidden;
	// transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);

	// &:active {
	// 	transform: translateY(2px);
	// 	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
	// }

	.title {
		width: 100%;
		display: flex;
		align-items: center;
		color: #2d2d2d;
		justify-content: space-between;
		margin-bottom: 10px;

		.left {
			justify-content: center;
			align-items: center;
			display: flex;

			.ic-shiyanshi {
				color: #2196f3;
				font-size: 22px;
			}

			text {
				font-size: 16px;
				margin-left: 8px;
				font-weight: bold;
				color: #333;
			}
		}

		.right {
			font-size: 12px;
			font-weight: bold;
			display: flex;
			align-items: center;
			padding: 4px 8px;
			border-radius: 4px;

			.ic-dui,
			.ic-cuo,
			.ic-jianshe,
			.ic-guzhang {
				font-size: 14px;
				margin-left: 4px;
			}

			text {
				margin-right: 3px;
			}
		}

		.dui {
			color: #4cd964;
			background-color: rgba(76, 217, 100, 0.1);
		}

		.cuo {
			color: #F17662;
			background-color: rgba(241, 118, 98, 0.1);
		}

		.jianshe {
			color: #f69c00;
			background-color: rgba(246, 156, 0, 0.1);
		}

		.zanting {
			color: #9BA0AC;
			background-color: rgba(155, 160, 172, 0.1);
		}

		.guzhang {
			color: #F0B500;
			background-color: rgba(240, 181, 0, 0.1);
		}
	}

	.bottom {
		.address {
			display: flex;
			align-items: center;
			color: #797979;
			margin-left: 5px;
			margin-bottom: 8px;

			.ic-weizhi {
				font-size: 16px;
				color: #48d3cf;
			}

			text {
				margin-left: 8px;
				font-size: 14px;
				color: #666;
			}
		}
	}

	.sbitem {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		animation: fadeIn 0.5s forwards;
		border-top: 1px dashed rgba(33, 150, 243, 0.2);
		padding-top: 10px;
	}
}
</style>